<template>
  <div class="min-h-screen bg-gray-50">
    <nav class="bg-white shadow-lg">
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <span class="text-2xl font-[&#39;Pacifico&#39;] text-custom">AI解题助手</span>
            <div class="ml-10">
              <button class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-custom !rounded-button">
                <i class="fas fa-graduation-cap mr-2"></i>
                选择学段
                <i class="fas fa-chevron-down ml-2"></i>
              </button>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <button class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-custom !rounded-button">
              <i class="fas fa-user-circle mr-2"></i>
              个人学习中心
            </button>
            <button class="px-4 py-2 text-sm font-medium bg-custom text-white hover:bg-opacity-90 !rounded-button">
              登录/注册
            </button>
          </div>
        </div>
      </div>
    </nav>

    <div class="max-w-7xl mx-auto px-4 py-8">
      <div class="grid grid-cols-3 gap-8">
        <div class="col-span-2">
          <div class="bg-white p-6 rounded-lg shadow-md mb-8">
            <div class="flex items-center justify-between mb-6">
              <h2 class="text-xl font-bold">题型练习</h2>
              <div class="flex space-x-4">
                <button class="px-4 py-2 text-sm font-medium text-custom border border-custom rounded-lg hover:bg-custom hover:text-white">难度筛选</button>
                <button class="px-4 py-2 text-sm font-medium text-custom border border-custom rounded-lg hover:bg-custom hover:text-white">知识点筛选</button>
              </div>
            </div>
            <div class="grid grid-cols-1 gap-6">
              <div class="bg-white p-6 rounded-lg shadow-md">
                <div class="flex justify-between items-center mb-4">
                  <h3 class="font-medium">几何</h3>
                  <span class="text-sm text-gray-500">共12题</span>
                </div>
                <div class="space-y-6">
                  <div class="p-4 bg-gray-50 rounded-lg">
                    <div class="flex justify-between items-start">
                      <div>
                        <h4 class="font-medium mb-2">相似三角形证明题</h4>
                        <p class="text-sm text-gray-600">难度：中等 | 知识点：几何证明</p>
                      </div>
                      <button class="px-4 py-2 text-sm text-custom border border-custom rounded-lg hover:bg-custom hover:text-white">开始解答</button>
                    </div>
                  </div>
                  <div class="p-4 bg-gray-50 rounded-lg">
                    <div class="flex justify-between items-start">
                      <div>
                        <h4 class="font-medium mb-2">圆的切线性质应用</h4>
                        <p class="text-sm text-gray-600">难度：中等 | 知识点：圆的性质</p>
                      </div>
                      <button class="px-4 py-2 text-sm text-custom border border-custom rounded-lg hover:bg-custom hover:text-white">开始解答</button>
                    </div>
                  </div>
                  <div class="p-4 bg-gray-50 rounded-lg">
                    <div class="flex justify-between items-start">
                      <div>
                        <h4 class="font-medium mb-2">全等三角形证明</h4>
                        <p class="text-sm text-gray-600">难度：中等 | 知识点：几何证明</p>
                      </div>
                      <button class="px-4 py-2 text-sm text-custom border border-custom rounded-lg hover:bg-custom hover:text-white">开始解答</button>
                    </div>
                  </div>
                </div>
                <div class="mt-4 text-center">
                  <button class="px-4 py-2 text-sm text-gray-600 hover:text-custom">显示更多题目 <i class="fas fa-chevron-down ml-1"></i></button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="bg-white p-6 rounded-lg shadow-md h-fit">
          <h3 class="text-lg font-medium mb-4">学习数据</h3>
          <div class="space-y-6">
            <div class="p-4 bg-gray-50 rounded-lg">
              <h4 class="font-medium text-sm mb-3">本周学习概览</h4>
              <div class="space-y-2">
                <div class="flex justify-between text-sm">
                  <span class="text-gray-600">完成题目</span>
                  <span class="font-medium">43题</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span class="text-gray-600">平均正确率</span>
                  <span class="font-medium">84%</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span class="text-gray-600">学习时长</span>
                  <span class="font-medium">6.5小时</span>
                </div>
              </div>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg">
              <h4 class="font-medium text-sm mb-3">待复习知识点</h4>
              <ul class="text-sm text-gray-600 space-y-2">
                <li>三角函数基础</li>
                <li>导数应用</li>
                <li>空间向量</li>
              </ul>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg">
              <h4 class="font-medium text-sm mb-3">薄弱知识点</h4>
              <ul class="text-sm text-gray-600 space-y-2">
                <li>立体几何证明</li>
                <li>圆锥曲线</li>
                <li>复数运算</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg">
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-center justify-between h-16">
          <button class="flex items-center text-sm font-medium text-gray-700 hover:text-custom !rounded-button">
            <i class="fas fa-square-root-alt text-lg mr-2"></i>
            公式编辑器
          </button>
          <button class="flex items-center text-sm font-medium text-gray-700 hover:text-custom !rounded-button">
            <i class="fas fa-calculator text-lg mr-2"></i>
            科学计算器
          </button>
          <button class="flex items-center text-sm font-medium text-gray-700 hover:text-custom !rounded-button">
            <i class="fas fa-draw-polygon text-lg mr-2"></i>
            几何画图
          </button>
          <button class="flex items-center text-sm font-medium text-gray-700 hover:text-custom !rounded-button">
            <i class="fas fa-book text-lg mr-2"></i>
            学习笔记
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
@import url('https://ai-public.mastergo.com/gen_page/tailwind-custom.css');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

/* Add any additional styles here */
</style>
